<template>
    <div class="header-box">
      <div class="logo">
        <img src="~image/logo.png">
      </div>
      <div class="nav">
        <a href="javascript:;">EYEGLASSES</a>
        <span>|</span>
        <a href="javascript:;">SUNGLASSES</a>
      </div>
    </div>
</template>

<script>
export default {
  data() {
    return {

    }
  },
  props: {

  },
  created() {

  },
  computed: {

  },
  methods: {

  }
}
</script>

<style lang="less" scoped>
.header-box{
  .h(190);
  overflow: hidden;
  .logo{
    .w(182);
    .h(77);
    margin:0 auto;
    .mt(35);
    .mb(32);
    img{
      width:100%;
      height:100%;
    }
  }
  .nav{
    text-align: center;
    color:#333;
    .fs(26);
    .h(30);
    .lh(30);
    a{
      color:#333;
      font-weight: 700;
      -webkit-transition: all .3s;
      transition: all .3s;
      &:hover{
        color:#dd3333;
      }
    }
    span{
      .padding(0,18);
      .vertical(3);
      .fs(22);
    }
  }
}
</style>
